<template>
  <div>
    <a-modal
      title="查看"
      :width="900"
      :visible="visible"
      :confirmLoading="confirmLoading"
      @cancel="handleCancel"
      @ok="handleOk"
      cancelText="关闭"
      class="pop-table"
      :closable="false">
      <!--      <a-row style="width:100%;text-align:right;margin-bottom:15px;">-->
      <!--        <a-input-search placeholder="请输入线索" v-model="thread" style="width: 200px;" @search="onSearch" />-->
      <!--      </a-row>-->
      <a-row style="margin-top: 20px;">
        <a-col :md="6" :sm="6">
          <a-form-item>

            <a-select v-model="queryParam.keyword" placeholder="请选择关键词" class="select-box" style="width: 100%">
              <a-select-option value="" >全部</a-select-option>

              <a-select-option v-for="item in keywordList" :key="item.keywordName" >{{ item.keywordName }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :md="5" :sm="6">
          <a-form-item>
            <a-select v-model="queryParam.cluesSource" placeholder="请选择来源" class="select-box" style="width: 100%">
              <a-select-option value>请选择</a-select-option>
              <a-select-option value="1">爬虫</a-select-option>
              <a-select-option value="2">用户爆料</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>

        <a-col :md="5" :sm="6" v-if="queryParam.cluesSource == '1' ">
          <a-form-item>
            <a-select v-model="queryParam.crawlerSource" placeholder="请选择来源" class="select-box" style="width: 100%">
              <a-select-option value>请选择</a-select-option>
              <a-select-option value="0">新华网</a-select-option>
              <a-select-option value="1">学习强国</a-select-option>
              <a-select-option value="2">中国日报</a-select-option>
              <a-select-option value="3">央视网</a-select-option>
              <a-select-option value="4">央广网</a-select-option>

            </a-select>
          </a-form-item>
        </a-col>
        <a-col :xl="2" :lg="2" :md="2" :sm="6">
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-button type="primary" @click="searchQuery" icon="search" shape="circle"></a-button>
            <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button> -->
          </span>
        </a-col>
      </a-row>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange">
        <template slot="sourceSlot" slot-scope="text, record">
          <div v-if="record.cluesSource == 1">爬虫</div>
          <div v-if="record.cluesSource == 2">用户爆料</div>
        </template>
      </a-table>
      <a-tag v-for="(item,index) in clues2" :key="index" :closable="true" @close.prevent="tagClose(index)">
        {{ item.cluesName?item.cluesName : item.cluesTitle }}
      </a-tag>
    </a-modal>
  </div>
</template>

<script>
import {
    deleteAction,
    getAction
} from '@/api/manage'
import DetailList from '@/components/tools/DetailList'
import {
    JeecgListMixin
} from '@/mixins/JeecgListMixin'
const DetailListItem = DetailList.Item
export default {
    components: {
        DetailList,
        DetailListItem
    },
    mixins: [JeecgListMixin],
    props: {
        clues: {
            type: Array
        }
    },
    data () {
        return {
            selectList: [],
            visible: false,
            visibleDetail: false,
            confirmLoading: false,
            thread: '',
            model: {},
            data: [],
            selectedRowKeys: [],
            // selectedRows: [],
            clues2: [],
            selectedData: [],
            pagination: {},
            pageNo: 1,
            pageSize: 10,
            dataSource: [],
            loading: false,
            recordLocal: {},
            columns: [{
                title: '关键词',
                align: 'center',
                dataIndex: 'keyword',
                width: 80
            },
            {
                title: '线索标题',
                align: 'center',
                width: 150,
                dataIndex: 'cluesTitle'
            },
            {
                title: '来源',
                align: 'center',
                width: 80,
                dataIndex: 'cluesSource',
                scopedSlots: {
                    customRender: 'sourceSlot'
                }
            },
            {
                title: '转发数',
                align: 'center',
                width: 80,
                dataIndex: 'forwardNum'
            },
            {
                title: '评论数',
                align: 'center',
                width: 80,
                dataIndex: 'remarkNum'
            },
            {
                title: '阅读量',
                align: 'center',
                width: 80,
                dataIndex: 'readNum'
            },
            {
                title: '发布时间',
                align: 'center',
                width: 120,
                dataIndex: 'releaseTime'
            }
            ],
            url: {
                list: '/clues/list',
                delete: '/clues/delete',
                deleteBatch: '/clues/deleteBatch',
                initKeywordList: '/clues/initKeywordList',
                queryById: 'clues/queryById',
                queryListByIds: '/clues/queryListByIds'
            },
            tagVisible: true,
            keywordList: [{ keywordName: '全部', keywordValue: '' }]
        }
    },
    created () {
        this.initKeywordList()
    },
    methods: {
        handleDetail (record) {
            this.recordLocal = record
            this.visibleDetail = true
        },
        deleteClue (record) {
            this.dataSource.forEach((item, index) => {
                if (item === record.id) {
                    this.dataSource.splice(index, 1)
                }
            })

            deleteAction(this.url.delete, {
                id: record.id
            }).then(res => {
                if (res.success) {
                    this.$message.success(res.message)
                    // this.getAllList()
                }
            })
        },
        onSelectChange (selectedRowKeys, selectedRows) {
        //  	var that = this;
        //
        //  	if(this.selectedRows && this.selectedRows.length >0){
        //  		// 获取新增的线索
        //  		selectedRows.forEach((item,index) =>{
        //  			var hasCheck = false;
        //  			var curItem = null;
        //  			that.selectedRows.forEach((sele,index) =>{
        //  				if(item.id == sele.id){
        //  					hasCheck = true;
        //  					curItem = item;
        //  				}
        //  			})
        //  			if(!hasCheck){
        //  				// 新增
        //  				that.selectedRows.push(curItem);
        //  				this.selectedRowKeys.push(curItem.id);
        //  			}
        //  		})
        //
        //  		// 获取删除的线索
        //
        //  	}else{
        //  		that.selectedRows = selectedRows;
        //  		that.selectedRowKeys = selectedRowKeys;
        //  	}

            // 获取删除的线索

            //   this.selectedRows = selectedRows
            // this.selectedRowKeys = selectedRowKeys
            // if (this.selectedRowKeys && this.selectedRowKeys.length > 0) {
            //   var ids = '';
            //   this.selectedRowKeys.forEach((item, index) => {
            //     ids += item + ",";
            //   })
            //   ids = ids.substr(0, ids.length - 1);
            //   this.queryListByIds(ids);
            // }
            this.clues2 = this.clues2.concat(selectedRows)
            var hash = {}
            this.clues2 = this.clues2.reduce((item, next) => {
                hash[next.id] ? '' : hash[next.id] = true && item.push(next)
                return item
            }, [])
            console.log(this.clues2)
        },
        queryListByIds (ids) {
            var that = this
            var params = {
                ids: ids
            }
            getAction(this.url.queryListByIds, params).then((res) => {
                if (res.success) {
                    that.selectedRows = res.result
                    console.log(that.selectedRows)
                }
            })
        },
        initKeywordList: function () {
            getAction(this.url.initKeywordList).then(res => {
                if (res.success) {
                    this.keywordList = res.result
                }
            })
        },
        clueSet (selectedRows) {
            this.clues2 = selectedRows
            this.clues2.reduce((p, c, i, a) => {
                this.selectedRowKeys.push(c.id)
            })
            // this.getAllList()
            this.visible = true
        },
        close () {
            this.visible = false
        },
        closeDetail () {
            this.visibleDetail = false
        },
        handleOk () {
        // var resultList = [];
        // this.selectedRowKeys;
        // var that = this;
        // this.data.forEach((item,index)=> {
        // 	that.selectedRowKeys.forEach((temp,tIndex)=>{
        // 		if(temp == item.id){
        // 			var param = {
        // 				cluesId:item.id,
        // 				cluesName:item.cluesName
        // 			}
        // 			resultList.push(param);
        // 		}
        // 	})

            // })
            // this.$emit('func', this.clues2)
            this.$emit('update:clues', this.clues2)
            // this.$emit('selectInfo', newValue)
            this.close()
        },
        handleCancel () {
            this.close()
        },
        handleOkDetail () {
            this.closeDetail()
        },
        handleCancelDetail () {
            this.closeDetail()
        },
        tagClose (index) {
            this.clues2.splice(index, 1)
            this.selectedRowKeys.splice(index, 1)
            this.$forceUpdate()
        },
        show () {
            this.visible = true
            this.clues2 = Array.from(this.clues)
        },
        onSearch () {

        }
    },
    watch: {
        clues2 (newValue, oldValue) {
            this.selectList = newValue
            if (newValue && newValue.length > 0) {
                this.selectedRowKeys = []
                newValue.forEach((item, index) => {
                    this.selectedRowKeys.push(item.id)
                })
                console.log(this.selectedRowKeys)
                this.$forceUpdate()
            }
        },
        clues (newValue, oldValue) {
            this.clues2 = Array.from(newValue)
            for (let item of this.clues2) {
                if (item.cluesId) item.id = item.cluesId
            }
            console.log(this.clues2)
        }
    }
}
</script>

<style>
</style>
